<template>
  <view class="container">
    <!-- 浮动按钮 -->
    <view class="floating-button" @click="onFloatingButtonClick">
      <image src="/static/images/icon/toadd.png" class="icon-img" mode="aspectFit" />
    </view>

    <!-- 查询条件 -->
    <view class="filters">
      <view @click="toggleFilters" class="filter-header">
        <text>查询条件</text>
        <text>{{ showFilters ? '收起' : '展开' }}</text>
      </view>
      <view v-if="showFilters" class="filter-body">
        <input class="filter-input" v-model="query.name" placeholder="请输入客户名称" />
        <view class="item-actions-inline">
          <button @click="search()" class="action-button">查询</button>
          <button @click="reset()" class="action-button danger">重置</button>
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <view class="list-container" @scroll="handleScroll">
      <view v-for="item in listData" :key="item.id" class="list-item">
        <view @click="viewDetails(item)">
          <view class="list-detail">客户编号：{{ item.id }}</view>
          <view class="list-detail">客户名称：{{ item.name }}</view>
          <view class="list-detail">跟进状态：{{ item.followUpStatus ? '已跟进' : '未跟进' }}</view>
          <view class="list-detail">最后跟进时间：{{ item.contactLastTime }}</view>
          <view class="list-detail">负责人：{{ item.ownerUserName }}</view>
          <view class="list-detail">手机：{{ item.mobile }}</view>
          <view class="list-detail">地区：{{ item.areaName }}</view>
          <view class="list-detail">行业：{{ item.industryId }}</view>
          <view class="divider"></view>
        </view>
        <view class="item-actions-inline">
          <button @click="editItem(item)" class="action-button">修改</button>
          <button @click="deleteItem(item)" class="action-button danger">删除</button>
        </view>
      </view>
      <view v-if="!hasMoreData" class="no-more-data">没有更多数据了</view>
      <view v-if="loading" class="loading-text">加载中...</view>
    </view>
  </view>
</template>
<script>
import { pageList, deleteCustomer } from "@/sheep/api/erp/customer.js";
export default {
  data() {
    return {
      showFilters: false,
      query: {
        name: "", // 查询字段：客户名称
      },
      listData: [],
      pageNum: 1,
      pageSize: 10,
      loading: false,
      hasMoreData: true,
    };
  },
  methods: {
    toggleFilters() {
      this.showFilters = !this.showFilters;
    },
    reset() {
      this.query.name = "";
      this.refreshData();
    },
    search() {
      this.refreshData();
    },
    refreshData() {
      this.pageNum = 1;
      this.hasMoreData = true;
      this.listData = [];
      this.loadMoreData();
    },
    loadMoreData() {
      if (this.loading || !this.hasMoreData) return;
      this.loading = true;
      const params = {
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        ...this.query,
      };
      pageList(params)
        .then((res) => {
          const { list, total } = res.data;
          if (this.pageNum * this.pageSize >= total || list.length === 0) {
            this.hasMoreData = false;
          }
          this.listData = [...this.listData, ...list];
        })
        .catch((error) => {
          console.error("加载数据失败:", error);
        })
        .finally(() => {
          this.loading = false;
          uni.stopPullDownRefresh();
        });
    },
    onReachBottom() {
      if (this.loading || !this.hasMoreData) return;
      this.pageNum++;
      this.loadMoreData();
    },
    onPullDownRefresh() {
      this.refreshData();
    },
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.detail;
      if (scrollTop + clientHeight >= scrollHeight - 50) {
        this.onReachBottom();
      }
    },
    onFloatingButtonClick() {
      uni.setStorageSync("customerId", "");
      uni.navigateTo({
        url: "/pages/erp/customer/edit",
      });
    },
    editItem(item) {
      const customerId = encodeURIComponent(item.id);
      uni.setStorageSync("customerId", customerId);
      uni.navigateTo({
        url: "/pages/erp/customer/edit",
      });
    },
    viewDetails(item) {
      const customerId = encodeURIComponent(item.id);
      uni.setStorageSync("customerId", customerId);
      uni.navigateTo({
        url: "/pages/erp/customer/show",
      });
    },
    async deleteItem(item) {
      try {
        if (item.id) {
          await deleteCustomer(item.id);
        }
        this.refreshData();
      } catch (error) {
        console.error("客户删除失败:", error);
      }
    },
  },
  onLoad() {
    this.refreshData();
  },
  onShow() {
    this.refreshData();
  },
};
</script>

<style scoped>
/* 页面样式 */
.container {
  padding: 3px;
  background-color: #eee;;
  display: flex;
  /* flex-direction: column; */
  /* height: 100vh; */
  /* overflow: hidden; */
}

.floating-button {
  position: fixed;
  bottom: 60px;
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.icon-img {
  width: 40px;
  height: 40px;
}

/* 查询条件样式 */
.filters {
  position: fixed;
  top: 35;
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.filter-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}

.filter-body {
  margin-top: 10px;
}

.filter-input {
  width: 100%;
  padding: 3px;
  font-size: 14px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.item-actions-inline {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.action-button {
  height: 25px;
  width: 60px;
  line-height: 25px;
  text-align: center;
  font-size: 13px;
  border-radius: 3px;
  background-color: #007aff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 1px 4px;
}

.action-button:hover {
  background-color: #0056b3;
}

.action-button:active {
  background-color: #004494;
  transform: translateY(1px);
}

.action-button.danger {
  background-color: #f44336;
}

.list-container {
  margin-top: 45px; /* 由于查询条件固定在顶部，给列表内容留出足够的空间 */
  flex: 1;
  overflow-y: auto;
  padding: 5px;
}

.list-item {
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 5px;
}

.list-detail {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.divider {
  border-top: 1px solid #eee;
  margin: 10px 0;
}

.no-more-data {
  text-align: center;
  padding: 10px;
  color: #999;
}

.loading-text {
  text-align: center;
  padding: 10px;
  color: #999;
}
</style>
